@import "compass/reset";
@import "compass/css3";
@import "color";

$color-primary: $color-blue-0 !default;
$color-secondary: $color-blue-1 !default;
$color-diabled: $color-grey-1 !default;

$font-family-default: "microsoft yahei" !default;
$font-size-default: 14px !default;
$height-default:30px !default;

.button-style1 {
    height: $height-default;
    background: $color-primary;
    border: 1px solid $color-primary;
    color: $color-white;
    font-family: $font-family-default;
    font-size: $font-size-default;
    box-sizing: border-box;
    padding: 0 15px;
    cursor: pointer;
    @include border-radius(2px);
    &:hover {
        background: $color-secondary;
    }
    &:disabled {
        background: $color-diabled;
        border: 1px solid $color-diabled;
    }
}

.button-style2 {
    height: $height-default;
    background: $color-white;
    border: 1px solid $color-primary;
    color: $color-primary;
    font-family: $font-family-default;
    font-size: $font-size-default;
    box-sizing: border-box;
    padding: 0 15px;
    cursor: pointer;
    @include border-radius(2px);
    &:hover{
        border: 1px solid $color-secondary;
        color: $color-secondary;
        background: #F2F2F2;
    }
    &:disabled {
        border: 1px solid $color-diabled;
        color: $color-diabled;
        &:hover {
            background: $color-white;
        }
    }
}

.textbox-style1{
    width: 200px;
    height: $height-default;
    box-sizing: border-box;
    border: 1px solid $color-grey-1;
    cursor: pointer;
    &:hover{
        border: 1px solid $color-primary;
    }
    &:focus{
        outline: 1px solid $color-primary;
    }
    &:disabled{
        border: none;
        outline: none;
    }
}
